<script setup>
import { ref, watch, onMounted } from 'vue';
import { getConfigGroupList, getConfigByGroup } from '@/api/backend/config.js';
const uploadDialogVisible = ref(false);
const chooseDialogVisible = ref(false);
const previewDialogVisible = ref(false);
const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' });
const breadcrumbItems = ref([{ label: '网站管理' }, { label: '网站设置' }]);

const openUploadDialog = () => {
    uploadDialogVisible.value = true;
};

const hideUploadDialog = () => {
    uploadDialogVisible.value = false;
};

const openChooseDialog = () => {
    chooseDialogVisible.value = true;
};

const hideChooseDialog = () => {
    chooseDialogVisible.value = false;
};

const openPreviewDialog = () => {
    previewDialogVisible.value = true;
};

const hidePreviewDialog = () => {
    previewDialogVisible.value = false;
};

const activeTab = ref(0); // 记录当前激活的标签页
// 获取初始标签配置
const tabs = ref([]);

// 模拟异步数据加载
const loadTabContent = async (index) => {
    try {
        tabs.value[index].loading = true;

        // 模拟 API 调用
        const response = await getConfigByGroup({ group_id: tabs.value[index].group_id });
        if (response.code == 200) {
            tabs.value[index].content = response.data;
        } else {
            tabs.value[index].content = 'Error fetching data';
        }

        // tabs.value[index].content = data.content;
    } catch (error) {
        console.error('Error loading tab content:', error);
        tabs.value[index].content = 'Error loading content';
    } finally {
        tabs.value[index].loading = false;
    }
};

// 初始化动态标签页
onMounted(async () => {
    // 模拟初始数据获取
    getConfigGroupList().then(async (res) => {
        if (res.code == 200) {
            tabs.value = res.data.map((tab) => ({
                group_id: tab.id,
                header: tab.title,
                content: '',
                loading: false
            }));
            // 预加载第一个标签内容
            loadTabContent(0);
        }
    });
});

// 监听标签切换
watch(activeTab, (newIndex) => {
    if (!tabs.value[newIndex].content) {
        loadTabContent(newIndex);
    }
});
</script>

<template>
    <div>
        <div class="card">
            <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
            <!-- 标签页组件 -->
            <TabView v-model:activeIndex="activeTab">
                <TabPanel v-for="(tab, index) in tabs" :key="index">
                    <template #header>
                        <div v-if="tab.loading" class="tab-header-loading">
                            {{ tab.header }}
                            <i class="pi pi-spinner pi-spin ml-2"></i>
                        </div>
                        <div v-if="!tab.loading">
                            {{ tab.header }}
                        </div>
                    </template>

                    <!-- 内容区 -->
                    <div v-if="tab.loading" class="tab-content-loading">
                        <ProgressSpinner style="width: 50px; height: 50px" />
                    </div>
                    <div v-else class="tab-content card flex flex-col gap-4">
                        <div v-for="(citem, cindex) in tab.content" :key="cindex">
                            <div v-if="citem.config_type == 1" class="grid grid-cols-12 gap-2">
                                <label for="{{citem.config_key}}" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">{{ citem.config_title }}</label>
                                <div class="col-span-12 md:col-span-10">
                                    <InputText id="{{citem.config_key}}" type="text" v-model="citem.config_value" />
                                </div>
                            </div>
                            <div v-else-if="citem.config_type == 4" class="grid grid-cols-12 gap-2">
                                <label :for="citem.config_key" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">{{ citem.config_title }}</label>
                                <div class="col-span-12 md:col-span-10">
                                    <div class="flex flex-wrap items-start gap-4">
                                        <InputText :id="citem.config_key" :name="citem.config_key" type="text" v-model="citem.config_value" />
                                        <Button label="上传" :fluid="false" @click="openUploadDialog"></Button>
                                        <Button label="选择" :fluid="false" @click="openChooseDialog"></Button>
                                        <Button label="预览" :fluid="false" @click="openPreviewDialog"></Button>
                                    </div>
                                </div>
                            </div>
                            <div v-else-if="citem.config_type == 9" class="font-semibold text-xl">
                                {{ citem.config_title }} <template v-if="citem.data_text">（{{ citem.data_text }}）</template>
                            </div>
                            <div v-else-if="citem.config_type == 6" class="grid grid-cols-12 gap-2">
                                <label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">{{ citem.config_title }}</label>
                                <div class="col-span-12 md:col-span-10">
                                    <div class="flex flex-col md:flex-row gap-4">
                                        <div class="flex items-center" v-for="(option_data, option_index) in citem.data_value.split(',')" :key="option_index">
                                            <RadioButton :id="citem.config_key + '_0'" :name="citem.config_key" :value="option_data.split('|')[1]" v-model="citem.config_value" />
                                            <label :for="citem.config_key + '_0'" class="leading-none ml-2">{{ option_data.split('|')[0] }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-else-if="citem.config_type == 5" class="grid grid-cols-12 gap-2">
                                <label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">{{ citem.config_title }}</label>
                                <div class="col-span-12 md:col-span-10">
                                    <Textarea name="{{citem.config_key}}" v-model="citem.config_value" :autoResize="true" rows="3" cols="50" />
                                </div>
                            </div>
                            <div v-else>
                                <div>{{ citem }}</div>
                                <div class="grid grid-cols-12 gap-2">
                                    <label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">{{ citem.config_title }}</label>
                                    <div class="col-span-12 md:col-span-10">
                                        <InputText id="name3" type="text" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </TabPanel>
            </TabView>
        </div>
        <!-- 上传对话框 -->
        <Dialog v-model:visible="uploadDialogVisible" :style="{ width: '450px' }" header="上传" :modal="true">
            <template #footer>
                <Button label="取消" text @click="hideUploadDialog" />
                <Button label="确定" @click="uploadImageSave" />
            </template>
        </Dialog>
        <!-- 选择对话框 -->
        <Dialog v-model:visible="chooseDialogVisible" :style="{ width: '450px' }" header="选择" :modal="true">
            <template #footer>
                <Button label="取消" text @click="hideChooseDialog" />
                <Button label="确定" @click="chooseImageSave" />
            </template>
        </Dialog>
        <!-- 预览对话框 -->
        <Dialog v-model:visible="previewDialogVisible" header="预览" :modal="true"></Dialog>
    </div>
</template>
